<template>
  <div class="content">
    <Tabs value="name1">
      <TabPane label="功能管理" name="name1">
        <Button type="primary" @click="addNode">新增</Button>
        <Button type="primary" @click="editNode">修改</Button>
        <Button type="primary" @click="deleteNode">删除</Button>
        <Tree :data="data2" show-checkbox @on-check-change="changeNodes" @on-select-change="changeSelect" ref='tree'></Tree>

      </TabPane>
    </Tabs>
    <Modal v-model="modal1" title="菜单操作" @on-ok="ok" @on-cancel="cancel" cancel-text="取消" ok-text="确定">
      <Form label-position="left" :label-width="70">
        <FormItem label="菜单名称">
          <Input v-model="functionName"></Input>
        </FormItem>
        <FormItem label="节点类型">
          <!-- <Input v-model="node.menuFlag"></Input> -->
          <Select v-model="menuFlag" style="width:200px">
            <Option v-for="item in menuFlag1" :value="item.index" :key="item.index">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="菜单url">
          <Input v-model="functionUrl"></Input>
        </FormItem>
        <FormItem label="菜单序号">
          <Input v-model="functionOrderNum"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="functionIntroduce"></Input>
        </FormItem>
        <FormItem label="节点位置" v-show="edit">
          <RadioGroup v-model="nodeType">
            <Radio label="兄弟节点">
              <span>兄弟节点</span>
            </Radio>
            <Radio label="子节点">
              <span>子节点</span>
            </Radio>
          </RadioGroup>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal1: false,
      data2: [],
      nodeType: "子节点",
      node: {
        parentId: "",
        functionName: "",
        functionUrl: "",
        functionIntroduce: "",
        functionOrderNum: "",
        menuFlag: "",
        nodeKey: ""
      },
      edit: false,
      functionName: "",
      functionUrl: "",
      functionOrderNum: "",
      functionIntroduce: "",
      menuFlag: 1,
      menuFlag1: [
        {
          label: "菜单",
          index: "1"
        },
        {
          label: "功能",
          index: "0"
        }
      ]
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const self = this;
      self.data2 = [];
      this.$http.post("/api/auth/sysfun/doGetFunctionList").then(res => {
        let list = res.retBody;
        list.forEach(function(item) {
          item.children = [];
          item.expand = true;
          if (item.parentId == 0) {
            self.data2.push(item);
            item.title = item.functionName;

            self.data2.forEach((item1, index1) => {
              list.forEach(item2 => {
                if (item1.id == item2.parentId) {
                  item2.title = item2.functionName;
                  if (
                    item.hasOwnProperty("children") &&
                    item1.children.indexOf(item2) == -1
                  ) {
                    item1.children.push(item2);
                  }
                  item1.children.forEach((item3, index2) => {
                    list.forEach(item4 => {
                      if (item3.id == item4.parentId) {
                        item4.title = item4.functionName;
                        if (
                          item3.hasOwnProperty("children") &&
                          item3.children.indexOf(item4) == -1
                        ) {
                          item3.children.push(item4);
                        }
                      }
                    });
                  });
                }
              });
            });
          }
        });
      });
    },
    /**
     * 获取选中的checkbox
     */
    changeNodes() {
      // if (this.$refs.tree.getCheckedNodes().length != 0) {
      //   console.log(this.$refs.tree.getCheckedNodes());
      //   let node = this.$refs.tree.getCheckedNodes()[0];
      //   if (!(this.$refs.tree.getSelectedNodes().length == 0)) {
      //     this.$Message.info("复选框和树节点不允许同时选中");
      //     return;
      //   }
      //   if (!this.$refs.tree.getSelectedNodes() == 0) {
      //     //这个判断防止当点击选择框而又点击树节点的其他标题
      //     for (let o in node) {
      //       this.node[o] = node[o];
      //     }
      //     this.functionName = this.node.title;
      //     this.functionOrderNum = this.node.functionOrderNum;
      //     this.menuFlag = this.node.menuFlag;
      //     this.functionUrl = this.node.functionUrl;
      //     this.parentId = this.node.parentId;
      //     this.functionIntroduce = this.node.functionIntroduce;
      //   }
      // } else {
      //   this.node = {
      //     parentId: "",
      //     functionName: "",
      //     functionUrl: "",
      //     functionIntroduce: "",
      //     functionOrderNum: "",
      //     menuFlag: "",
      //     nodeKey: ""
      //   };
      // }
    },
    /**
     * 获取选中的树节点
     */
    changeSelect() {
      if (this.$refs.tree.getSelectedNodes().length != 0) {
        let node = this.$refs.tree.getSelectedNodes();
        this.node = node[0];
        if (!(this.$refs.tree.getCheckedNodes().length == 0)) {
          this.$Message.info("复选框和树节点不允许同时选中");
          return;
        }
        if (this.$refs.tree.getCheckedNodes().length == 0) {
          //这个判断树节点的标题而又点击了其他树节点的
          for (let o in node[0]) {
            this.node[o] = node[0][o];
          }
          this.functionName = this.node.title;
          this.functionOrderNum = this.node.functionOrderNum;
          this.menuFlag = this.node.menuFlag;
          this.functionUrl = this.node.functionUrl;
          this.parentId = this.node.parentId;
          this.functionIntroduce = this.node.functionIntroduce;
        }
      } else {

      }
    },
    addNode() {
      this.functionName = "";
      this.functionOrderNum = "";
      this.functionOrderNum = "";
      this.functionUrl = "";
      this.functionIntroduce = "";
      this.edit = true;
      if (this.$refs.tree.getCheckedNodes().length != 0) {
        //当点击复选框的时候弹框隐藏
        this.modal1 = false;
      } else if (this.$refs.tree.getSelectedNodes().length != 0) {
        //当点击节点的时候弹框显示
        this.modal1 = true;
      } else {
        this.$Message.info("请选择一个根节点");
      }
    },
    /**
     * 编辑的点击事件
     */
    editNode() {
      this.edit = false;
      if (this.$refs.tree.getSelectedNodes().length != 0) {
        // 当点击节点的时候弹框显示
        console.log(this.node);
        this.modal1 = true;
        this.functionName = this.node.title;
        this.functionOrderNum = this.node.functionOrderNum;
        this.menuFlag = this.node.menuFlag;
        this.functionUrl = this.node.functionUrl;
        this.parentId = this.node.parentId;
        this.functionIntroduce = this.node.functionIntroduce;
      } else if (this.$refs.tree.getCheckedNodes().length != 0) {
        this.modal1 = false;
      } else {
        this.$Message.info("请选择一个根节点");
      }
    },
    /**
     * 编辑节点接口
     */
    editnode() {
      const self = this;
      let node = {
        id: self.node.id,
        functionName: self.functionName,
        functionUrl: self.functionUrl,
        functionIntroduce: self.functionIntroduce,
        functionOrderNum: self.functionOrderNum,
        menuFlag: self.menuFlag,
        title: self.functionName,
        nodeKey: self.node.nodeKey
      };
      this.$http.post("/api/auth/sysfun/doModFunction", node).then(res => {
        if (res.retHead.code == "0000000") {
          self.$Message.success({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        } else {
          self.$Message.warning({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        }
        self.initData();
      });
    },
    /**
     * 添加新节点
     */
    saveNode() {
      const self = this;
      let id = "";
      if (this.nodeType == "子节点") {
        id = self.node.id;
      } else if (this.nodeType == "兄弟节点") {
        id = self.node.parentId;
      }
      let node = {
        parentId: id,
        functionName: self.functionName,
        functionUrl: self.functionUrl,
        functionIntroduce: self.functionIntroduce,
        functionOrderNum: self.functionOrderNum,
        menuFlag: self.menuFlag,
        title: self.functionName,
        nodeKey: self.node.nodeKey
      };
      let formdata = new FormData(); //form表单提交
      for (let o in node) {
        formdata.append(o, node[o]);
      }

      self.$http.post("/api/auth/sysfun/doSaveFunction", node).then(res => {
        // self.data2.forEach(function(item, index) {
        //   if (item.id == node.parentId) {
        //     item.children.push(node);
        //     return;
        //   }
        //   if (
        //     node.parentId == item.parentId &&
        //     self.data2.indexOf(node) == -1
        //   ) {
        //     self.data2.push(node);
        //   }
        //   if (item.hasOwnProperty("children") && item.children.length != 0) {
        //     item["children"].forEach(function(item1, index) {
        //       if (item1.id == node.parentId) {
        //         item1.children.push(node);
        //         return;
        //       }
        //       if (
        //         item1.hasOwnProperty("children") &&
        //         item1.children.length != 0
        //       ) {
        //         item1["children"].forEach(function(item2, index) {
        //           if (item2.id == node.parentId) {
        //             item2.children.push(node);
        //             return;
        //           }
        //         });
        //       }
        //     });
        //   }
        // });
        self.initData();
        if (res.retHead.code == "0000000") {
          self.$Message.success({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        } else {
          self.$Message.warning({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        }

        self.modal1 = false;
      });
    },
    ok() {
      /**
       * 控制调用新建接口还是调用编辑接口
       */
      if (this.edit) {
        this.saveNode();
      } else {
        this.editnode();
      }
    },
    cancel() {},
    deleteNode() {
      const self = this;
      let formdata = new FormData(); //form表单提交
      console.log(this.$refs.tree.getCheckedNodes());
      let ids = "";
      let checkNodes = this.$refs.tree.getCheckedNodes();
      for (let i = 0, len = checkNodes.length; i < len; i++) {
        if (i != len - 1) {
          ids += checkNodes[i].id + ",";
        } else {
          ids += checkNodes[i].id;
        }
      }
      formdata.append("id", ids);

      this.$http
        .post("/api/auth/sysfun/doDelFunction", { id: ids })
        .then(res => {
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          self.initData();
        });
    }
  }
};
</script>

<style>
.menu{
  height: 100%;
}
.ivu-checkbox-wrapper {
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 1px;
}
.ivu-tree-title {
  font-size: 13px;
}


</style>
<style scoped>

</style>
